<template>
  <div class="WorkingSchedule" v-loading="loading">
    <el-form
      ref="form"
      size="mini"
      :model="form"
      label-position="top"
      class="myform"
    >
      <div>
        <el-form-item label="加工单号/采购单:" class="myform-item">
          <el-input
            v-model="form.processing_code"
            placeholder="请输入加工单号或采购单"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="工厂名:" class="myform-item">
          <el-input
            v-model="form.factory_name"
            placeholder="请输入工厂名"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item style="margin: 36px 10px 0">
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
        <el-form-item style="margin-top: 36px">
          <el-button type="primary" @click="onAdd">新建</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      :height="browserHeight - 200"
      border
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
      size="mini"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        label="成品加工单编码"
        align="center"
        prop="processing_code"
        width="140"
        fixed
      >
        <template slot-scope="{ row }">
          <div>
            <div>{{ row.processing_code }}</div>
            <div
              style="padding: 4px; color: #ffffff"
              :style="{ background: row.f_status == 0 ? 'red' : '#67C23A' }"
            >
              {{ row.f_status == 0 ? "进行中" : "已完成" }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="采购单号"
        align="center"
        prop="jy_number"
        width="180"
        fixed
      >
        <template slot-scope="{ row }">
          <div v-if="row.jy_number">{{ row.jy_number }}</div>
          <div v-if="row.po_id">{{ row.po_id }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="款号/SKU"
        prop="type_no"
        width="140"
        align="center"
        fixed
      >
        <template slot-scope="{ row }">
          <div v-if="row.type_no">
            款号：<span
              style="color: #2c70d6"
              class="pointer"
              @click="clicktype_no(row.type_no)"
              >{{ row.type_no }}</span
            >
          </div>
          <div v-if="row.sku_code" style="font-weight: 600">
            {{ row.sku_code }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="s_status" fixed>
        <template slot-scope="{ row }">
          <div
            :style="{
              color:
                row.s_status == 1
                  ? '#67C23A'
                  : row.s_status == 2
                  ? '#F56C6C'
                  : row.s_status == 3
                  ? '#E6A23C'
                  : '',
            }"
          >
            {{
              row.s_status == 1
                ? "已审核"
                : row.s_status == 0
                ? "未审核"
                : row.s_status == 2
                ? "已结案"
                : row.s_status == 3
                ? "已同步"
                : ""
            }}
          </div>
          <div
            :style="{
              color: row.is_oms == 1 ? '#67C23A' : '',
            }"
          >
            {{ row.is_oms == 0 ? "未推送" : "已推送" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="下单数" align="center" prop="num">
      </el-table-column>
      <el-table-column label="增裁数" align="center" prop="zc_num">
      </el-table-column>
      <el-table-column label="报次数" align="center" prop="bao_number">
      </el-table-column>
      <el-table-column label="入库数" align="center" prop="qty">
        <template slot-scope="{ row }">
          <el-button type="text" size="default" @click="ClickQty(row)">{{
            row.qty
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="未入库数" align="center" prop="wrks">
      </el-table-column>
      <el-table-column
        label="合同号/供应商"
        width="170"
        prop="factory_contract_no"
      >
        <template slot-scope="{ row }">
          <div
            v-if="row.factory_contract_no"
            style="color: #2c70d6"
            class="pointer"
            @click="clickfactory_contract_no(row.factory_contract_no)"
          >
            {{ row.factory_contract_no }}
          </div>
          <div v-if="row.factory_name">{{ row.factory_name }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="合同交期"
        prop="contract_date"
        align="center"
        width="120"
      >
      </el-table-column>
      <el-table-column label="总价" align="center" prop="countprice">
      </el-table-column>
      <el-table-column label="预付款" align="center" prop="advance_charge">
      </el-table-column>
      <!-- <el-table-column label="跟单人" align="center" prop="merchandiser">
      </el-table-column> -->
      <el-table-column label="理单人" align="center" prop="order_processor">
      </el-table-column>
      <el-table-column label="创建人" align="center" prop="adduser">
      </el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
        prop="createtime"
        width="110"
      >
      </el-table-column>
      <el-table-column
        label="更新时间"
        align="center"
        prop="updatetime"
        width="110"
      >
      </el-table-column>
      <el-table-column label="SKU单价" align="center" prop="unit_price">
      </el-table-column>

      <el-table-column label="操作" align="center" fixed="right" width="200">
        <template slot-scope="{ row }">
          <el-button type="text" @click="onEdit(row.processing_code)" size="mini"
          v-if="row.is_oms == 1" >编辑</el-button
          >
          <el-button
            type="text"
            v-if="row.is_oms == 0"
            @click="onPush(row.processing_code)"
            size="mini"
            >推送</el-button
          >
          <el-button
            type="text"
            style="color: red"
            v-if="row.is_oms != 0"
            @click="onCancel(row.processing_code)"
            >取消</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :form="form"
      :total="total"
      @paginationPostOrderTaskList="postAdminCodeGetpocessingcodelist"
    />
  </div>
</template>

<script>
import { getStore } from "@/utils/localStorage.js";
import {
  postAdminCodeGetpocessingcodelist,
  postHomeCodeGetFactory,
  postAdminOmsaddWarehousingProcessing,
  postAdminOmscancelProcessing
} from "@/api";
import pagination from "@/components/pagination.vue";
export default {
  components: { pagination },
  data() {
    return {
      loading: false,
      form: {
        processing_code: "",
        factory_name: "",
        source_type:4,
        page: 1,
        size: 10,
      }
    };
  },
  activated() {
    this.browserHeight =
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight;
    let form = this.form;
    this.postAdminCodeGetpocessingcodelist(form);
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.multipleTable.doLayout();
    });
  },
  methods: {
    // 取消
    onCancel(processing_code) {
      let obj = {
        processing_code,
      };
      let form = this.form;
      this.$confirm(`确定取消推送OMS?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          postAdminOmscancelProcessing(obj).then((res) => {
            this.$message({
              type: "success",
              message: "取消成功",
            });
            this.postAdminCodeGetpocessingcodelist(form);
          });
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消推送",
          // });
        });
    },
    onAdd(){
      this.$router.push({
        name:"PDAdminProvenTechniqueFSMSPNew",
        params:{type:1}
      })
    },
    onEdit(processing_code){
      this.$router.push({
        name:"PDAdminProvenTechniqueFSMSPEdit",
        query:{processing_code}
      })
    },
    // 加工厂列表
    async postHomeCodeGetFactory() {
      let obj = {
        page: 1,
        size: 1000,
      };
      await postHomeCodeGetFactory(obj).then((res) => {
        this.factoryList = res.data;
      });
    },
    headerCellStyle(row) {
      if (row.column.label == "未入库数") {
        return {
          color: "red",
          background: "#F5F7FA",
        };
      }
      if (
        row.column.label == "下单数" ||
        row.column.label == "增裁数" ||
        row.column.label == "报次数" ||
        row.column.label == "入库数"
      ) {
        return {
          background: "#F0F9EB",
        };
      }
    },
    // 列表
    async postAdminCodeGetpocessingcodelist(data) {
      this.loading = true;
      this.form = data;
      postAdminCodeGetpocessingcodelist(data)
        .then((res) => {
          this.loading = false;
          this.savetime = res.savetime;
          let data = res.data;
          for (let index = 0; index < data.length; index++) {
            data[index].wrks =
              Number(data[index].num) +
              Number(data[index].zc_num) -
              Number(data[index].bao_number) -
              Number(data[index].qty);
          }
          this.tableData = data;
          this.total = Number(res.total);
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 推送
    onPush(processing_code) {
      let obj = {
        processing_code,
      };
      let form = this.form;
      this.$confirm(`确定推送OMS?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          postAdminOmsaddWarehousingProcessing(obj).then((res) => {
            this.$message({
              type: "success",
              message: "成功",
            });
            this.postAdminCodeGetpocessingcodelist(form);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消推送",
          });
        });
    },
    // 搜索
    onSearch() {
      this.form.page = 1;
      this.form.size = 10;
      this.postAdminCodeGetpocessingcodelist(this.form);
    },
  },
};
</script>

<style lang="scss" scoped>
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
}
.WorkingSchedule {
  background: #ffff;
  padding: 20px;
  border-radius: 2px;
  @include boxShadow;
}
</style>
